<template>
  <div class="newslist-container">
    <van-loading type="spinner" vertical v-if="isLoading">加载中..</van-loading>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="newslist">
        <div class="item" v-for="item in newsList" :key="item.id">
          <div class="img_container">
            <img v-lazy="item.img_url" alt />
          </div>
          <div class="text">
            <div class="title">{{ item.title }}</div>
            <div class="info">
              <span>发布时间：{{ $dateFormat(item.add_time, 'MM-DD HH:mm') }}</span>
              <span>点击次数：{{ item.click }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import _ from 'lodash'
import { reqNewsList } from '@/api'
export default {
  data() {
    return {
      page: 1,
      pagesize: 3,
      newsList: [],
      isLoading: false,
      isLoadDone: false,
    }
  },
  methods: {
    async onRefresh() {
      console.log('下拉刷新')
      this.page = 1
      this.newsList = []
      await this.getNewsList()
      this.isLoading = false
      this.$toast('刷新成功')
    },
    async getNewsList() {
      let { message } = await reqNewsList({ page: this.page, pagesize: this.pagesize })
      if (message.length === 0) {
        this.isLoadDone = true
        this.$toast('后台返回的数据为空')
        return
      }
      this.newsList = [...this.newsList, ...message]
    },
    scrollHandler() {
      if (this.isLoadDone) {
        return
      }
      console.log('滚动')
      // 网页卷上去的高度
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 网页可视视口的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 整个网页的高度（包含溢出元素的高度）
      let pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight

      // 还没有触底，提前200px加载
      if (Math.ceil(scrollTop) + windowHeight + 20 >= pageHeight) {
        this.page++
        this.getNewsList()
      }
    },
  },
  created() {
    this.throttleScrollHandler = _.throttle(this.scrollHandler, 800)
  },
  mounted() {
    this.getNewsList()
    document.addEventListener('scroll', this.throttleScrollHandler)
  },
  beforeDestroy() {
    document.removeEventListener('scroll', this.throttleScrollHandler)
  },
}
</script>

<style lang="scss" scoped>
.newslist-container {
  .newslist {
    padding: 4px;
    background-color: rgb(241 235 235);

    .item {
      display: flex;
      height: 200px;
      margin-top: 8px;
      border-bottom: 1px solid #ccc;

      .img_container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        padding: 2px;

        img {
          width: 100px;
          height: 100%;
        }
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2px;

        .title {
          display: -webkit-box;
          margin-top: 10px;

          // 限制两行文本，超出显示省略号
          overflow: hidden;
          font-size: 14px;
          font-weight: 700;
          color: #000;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          font-size: 12px;
          color: #888;
        }
      }
    }
  }
}
</style>
